<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        .tuo {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
        }

        #preview {
            display: flex;
            flex-wrap: wrap;
        }

        #preview img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div>
        <input type="file" name="" id="input1" onchange="handleFiles(this.files)">
        <input type="file" name="" id="input2">
        <div class="tuo" id="dropbox">
            拖放文件
            <div id="preview"></div>
        </div>
        <script>
            function handleFiles(files) {
                console.log(files)
            }

            const inputElement = document.getElementById("input2");
            inputElement.addEventListener("change", handleFiles2, false);
            function handleFiles2() {
                console.log(this)
                const fileList = this.files; /* now you can work with the file list */
                console.log(fileList)
            }

            let dropbox;

            dropbox = document.getElementById("dropbox");
            dropbox.addEventListener("dragenter", dragenter, false);
            dropbox.addEventListener("dragover", dragover, false);
            dropbox.addEventListener("drop", drop, false);
            function dragenter(e) {
                e.stopPropagation();
                e.preventDefault();
            }

            function dragover(e) {
                e.stopPropagation();
                e.preventDefault();
            }
            function drop(e) {
                e.stopPropagation();//禁止事件传播
                e.preventDefault();//阻止默认事件

                var dt = e.dataTransfer;
                var files = dt.files;
                var file = files[0]
                console.log(file)
                

                let img = document.createElement('img')
                
                var reader = new FileReader();
                reader.onload = (e)=>{
                    console.log(e,e.target==e.currentTarget)//e里面都是什么属性
                    img.src = e.target.result //文件读取完成后传给img
                }
                reader.readAsDataURL(file);

                const preview = document.getElementById('preview')
                preview.appendChild(img)
            }
        </script>
    </div>
</body>

</html>